
	$('.leftmenu').on('tap',function(){
	  $('.lefthide').css('display','block')
	  $('.leftmask').css('display','block')
 })

	$('.leftmask').on('tap',function(){
	  $('.lefthide').css('display','none')
	  $(this).css('display','none')
 })





	var index = 0;
	$('html').on('swipeLeft',function(){
		index++;
		if(index<3){
			$('.hnav').eq(index).css('border-bottom','5px solid #0EC044').siblings().css('border-bottom','0');
			$('.box1').animate({
			"left":-6.4*index + 'rem'
		},function(){})
		}else{
			index =2;
		}
	})
		$('html').on('swipeRight',function(){
		index--;
		if(index>=0){
						$('.hnav').eq(index).css('border-bottom','5px solid #0EC044').siblings().css('border-bottom','0');
			$('.box1').animate({
			"left":-6.4*index + 'rem'
		},function(){})
		}else{
			index = 0;
		}
	})

//左侧隐藏

function callback(data){
			var oUl = document.getElementById('display');
			var btn = document.getElementById('btn');
 			oUl.style.display = 'block';
 			var oLi = oUl.getElementsByTagName('li');
 			var oAction = document.querySelectorAll('#attention');
 			for(var i = 0;i<oAction.length;i++){
 					oAction[i].style.display = 'none';
 			}		
			var html = '';
			if (data.length != 0) {
	      		for (var i = 0; i < data.s.length; i++) {
	            html += '<li>' + data.s[i] + '</li>'
	        }
	       oUl.innerHTML = html;
	    	}
				for(var j = 0;j<oLi.length;j++){
 				oLi[j].onclick = function(){
 					var oSearch = document.getElementById('text');
 					var txt = this.innerHTML;
   					  oSearch.value = txt; 
 						oUl.style.display = 'none';
 				}
 				
 			}
				btn.onclick = function(){
					for(var i = 0;i<oAction.length;i++){
 					oAction[i].style.display = 'block';
 						}
				}
		}

//注册
$(function(){
	var registerPhone = false;var registerPassword = false;var registerName = false;
	var $phone = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
	$('.container3 .register .register-phone').on("blur",function(){
		var $val = $(this).val();
		if(!$phone.test($val)){
			$('.container3 .register .phone-error').css('display','block');
			$(this).val('');
		}else{
			$('.container3 .register .phone-error').css('display','none');
			localStorage.setItem('username',$val);
			registerPhone = true;
		}
	})
	$('.container3 .register .register-password').on("blur",function(){
		$pwd = /^[a-zA-Z0-9]{6,18}$/;
		var $val1 = $(this).val();
		if(!$pwd.test($val1)){
			$('.container3 .register .pwd-error').css('display','block');
			$(this).val('')
		}else{
			$('.container3 .register .pwd-error').css('display','none');
			localStorage.setItem('password',$val1)
			registerPassword  = true;
		}
	})
	$('.container3 .register .register-name').on("blur",function(){
		var $val1 = $(this).val();
		if($val1==null){
			$('.container3 .register .null-error').css('display','block');
			$(this).val('')
		}else{
			$('.container3 .register .null-error').css('display','none');
			localStorage.setItem('name',$val1);
			registerName = true;
		}
	})
	$('.container3 .register .exit').on("tap",function(){
		$('.container3 .mask').css('display','none');
		$(this).parent().parent().css('display','none');
	})
	$('.container3 .register .ensure').on("tap",function(){
		if((registerPhone&&registerPassword &&registerName)==true){
			$('.container3 .login').css('display','block');
			$(this).parent().parent().css('display','none');
		}else{
			alert("您的信息不完整!!!")
		}
		
	})
	
	//登录页面
	var loginUsername = false;var loginPassword = false;
	$('.container3 .login .login-phone').on("blur",function(){
		var $username = localStorage.getItem('username');
		if($(this).val()==$username){
			$('.container3 .login .uesrname-error').css('display','none');
			loginUsername = true;
		}else{
			$('.container3 .login .uesrname-error').css('display','block');
			$(this).val('')
		}
	})
		$('.container3 .login .login-password').on("blur",function(){
		var $pwds = localStorage.getItem('password');
		if($(this).val()==$pwds){
			$('.container3 .login .password-error').css('display','none');
			loginPassword = true;
		}else{
			$('.container3 .login .password-error').css('display','block');
			$(this).val('')
		}
	})
		$('.container3 .login .no-id a').on('tap',function(){			
			$('.container3 .register').css('display','block');
			$(this).parent().parent().parent().css('display','none');
		})
			$('.container3 .login .exit').on("tap",function(){
		$('.container3 .mask').css('display','none');
		$(this).parent().css('display','none');
	})
		
		$('.container3 .login .btn').on("tap",function(){
			if((loginUsername&&loginPassword)==true){
				$('.container3 .mask').css('display','none');
				$(this).parent().parent().css('display','none');
			}else{
				alert("您的信息不完整!!!")
			}
		})
		$('.container3 .attention .right').on('tap',function(){
			var $username = localStorage.getItem('username');
			console.log($username);
			if($username == null){
				$('.login').css('display','block');
				$('.mask').css('display','block');
			}else{
				$(this).css('backgroundColor','#A9A9A9')
			}
		})
		
		
//		底部变换效果
//首页
		$('.footer .left .font1').on('tap',function(){
			$('.index_box').css('display','block');
			$(this).children().css('color',"#35AE51");
			$(this).siblings().children().css('color',"#CECECE");
			$('.gx_container1Nav').css('display','block');
			$('.container3').css('display','none');
			$('.container8').css('display','none');
			$('.footer .right .font1').children().css('color',"#CECECE");
			$('.footer .right .font2').children().css('color',"#CECECE");
			$(this).find('span').css('color','#35AE51');
			$('.topMiddle1').css('display','none');
			$('.topMiddle').css('display','block');
			$('.box1').css('left',0);
			index=0;
			$('.gx_section1').css('display','block');
			$('.gx_friend').css('display','none');
			$('.publicTop #news').css('background','rgba(255,255,255,0.5)')
	           $('.publicTop #focus').css({
	           	background:'rgba(255,255,255,0.3)',
	                      color: 'rgba(255, 255, 255, 0.7)'
	           })
	           $('.mine').hide();
	           $('.footballLive').css('border-bottom','5px solid #0ec044')
			$('.footballLife').css('border-bottom','0')
			$('.footballGirl').css('border-bottom','0')
		})
//		发现
		$('.footer .left .font2').on('tap',function(){
			$('.container3').css('display','block');
			$('.index_box').css('display','none');
			$('.container8').css('display','none');
			$('.gx_container1Nav').css('display','none');
			$(this).children().css('color',"#35AE51");
			$(this).siblings().children().css('color',"#CECECE");
			$('.footer .right .font1').children().css('color',"#CECECE");
			$('.footer .right .font2').children().css('color',"#CECECE");
			$(this).find('span').css('color','#35AE51');
				$('.topMiddle1').html("发现");
				$('.topMiddle1').css('display','block');
				$('.topMiddle').css('display','none')
			$('.mine').hide();
		})
//		我的
		$('.footer .right .font1').on('tap',function(){
			$('.container3').css('display','none');
			$('.container8').css('display','block');
			$('.index_box').css('display','none');
			$('.gx_photoCut').hide();
			$('.gx_container1Nav').css('display','none');
			$(this).children().css('color',"#35AE51");
			$('.mine').show();
			$(this).siblings().children().css('color',"#CECECE");
			$('.footer .left .font1').children().css('color',"#CECECE");
			$('.footer .left .font2').children().css('color',"#CECECE");
			$(this).find('span').css('color','#35AE51');
			$('.topMiddle1').html("个人中心");
			$('.topMiddle1').css('display','block');
			$('.topMiddle').css('display','none');
		})
//		退出
		$('.footer .right .font2').on('tap',function(){
			alert('确定要退出当前程序？');
			localStorage.clear();
			$(this).children().css('color',"#35AE51");
			$(this).siblings().children().css('color',"#CECECE");
			$('.footer .left .font1').children().css('color',"#CECECE");
			$('.footer .left .font2').children().css('color',"#CECECE");
			$(this).find('span').css('color','#35AE51');
		})
		
		
//		输入框关键字索引
		var oSearch = document.getElementById('text')
		oSearch.onkeyup = function() {
		var oScript = document.createElement('script');
    	oScript.src = 'http://unionsug.baidu.com/su?wd='
    	+ oSearch.value + '&p=3&cb=callback';
    	document.body.appendChild(oScript);
		}
		})
//首页

	$('.footballLife').on('tap',function(){
		$(this).css('border-bottom','5px solid #0ec044')
		$('.footballLive').css('border-bottom','0')
		$('.footballGirl').css('border-bottom','0')
		$('.box1').animate({"left":-6.4 + 'rem'},500)
		index = 1;
	})



	$('.footballLive').on('tap',function(){
		$(this).css('border-bottom','5px solid #0ec044')
		$('.footballLife').css('border-bottom','0')
		$('.footballGirl').css('border-bottom','0')
			$('.box1').animate({"left":0},500)
			index = 0;
	})



	$('.footballGirl').on('tap',function(){
		$(this).css('border-bottom','5px solid #0ec044')
		$('.footballLife').css('border-bottom','0')
		$('.footballLive').css('border-bottom','0')
	$('.box1').animate({"left":-12.8 + 'rem'},500)
			index = 2;
	})
	$('.publicTop #focus').on('tap',function(){
		$(this).css('background','rgba(255,255,255,0.5)')
		$('.gx_friend').css('display','block')
		$('.box1').css('display','none')
		$('.gx_container1Nav').css('display','none')
	    $('.publicTop #news').css({
	           	background:'rgba(255,255,255,0.3)',
	                      color: 'rgba(255, 255, 255, 0.7)'
	           })
	    $('.index_box').css({
	    	'marginTop':0,
	    	'marginBottom':0
	    })
	    
	})
	$('.publicTop #news').on('tap',function(){
		$(this).css('background','rgba(255,255,255,0.5)')
	           $('.publicTop #focus').css({
	           	background:'rgba(255,255,255,0.3)',
	                      color: 'rgba(255, 255, 255, 0.7)'
	           })
	    $('.gx_container1Nav').css('display','block')
	    $('.index_box').css({'margin-top':'1.58rem',
	    'margin-bottom':'.88rem'})
	    $('.gx_friend').css('display','none')
	    $('.box1').css('display','block')
	   $('.box1').css("left",0)
			index = 0;
		$('.footballLive').css('border-bottom','solid 5px #0ec044')
		$('.footballLife').css('border-bottom','0')
		$('.footballGirl').css('border-bottom','0')

	})
//左边栏点击足球现场的效果
	$('.lefthide .flive').on('tap',function(){
             $('.leftmask').css('display','none')
             $('.lefthide').css('display','none')
          		$('.box1').css("left",0)
				index = 0;
             $('.gx_friend').css('display','none')
             $('.container3').hide(); 
             $('.index_box').show();
             $('.mine').hide();
            $('.topMiddle1').hide();
             $('.topMiddle').show();
             $('.footer .left .font1 span').css('color',"#35AE51");
             $('.footer .left .font1 i').css('color',"#35AE51");
             $('.footer .left .font2 span').css('color',"#CECECE");
             $('.footer .left .font2 i').css('color',"#CECECE");
             $('.footer .right span').css('color',"#CECECE");
             $('.footer .right  i').css('color',"#CECECE");
             $('.gx_container1Nav').css('display','block')
             $('.index_box').css('margin-top','1.58rem')
             $('.footballLive').css('border-bottom','5px solid #0ec044')
			$('.footballLife').css('border-bottom','0')
			$('.footballGirl').css('border-bottom','0')
			$('.publicTop #news').css('background','rgba(255,255,255,0.5)')
	           $('.publicTop #focus').css({
	           	background:'rgba(255,255,255,0.3)',
	                      color: 'rgba(255, 255, 255, 0.7)'
	           })
	})
//左边栏点击足球生活的效果
	$('.lefthide .flife').on('tap',function(){
             $('.leftmask').css('display','none')
             $('.lefthide').css('display','none')
             $('.box1').css("left",-6.4 + 'rem')
				index = 1;
             $('.gx_friend').css('display','none')
             $('.gx_container1Nav').css('display','block')
             $('.index_box').css('margin-top','1.58rem')
             $('.container3').hide(); 
             $('.index_box').show();
             $('.mine').hide();
              $('.topMiddle1').hide();
             $('.topMiddle').show();
             $('.footer .left .font1 span').css('color',"#35AE51");
             $('.footer .left .font1 i').css('color',"#35AE51");
             $('.footer .left .font2 span').css('color',"#CECECE");
             $('.footer .left .font2 i').css('color',"#CECECE");
             $('.footer .right span').css('color',"#CECECE");
             $('.footer .right  i').css('color',"#CECECE");
             $('.footballLife').css('border-bottom','5px solid #0ec044')
			$('.footballLive').css('border-bottom','0')
			$('.footballGirl').css('border-bottom','0')
			$('.publicTop #news').css('background','rgba(255,255,255,0.5)')
	           $('.publicTop #focus').css({
	           	background:'rgba(255,255,255,0.3)',
	                      color: 'rgba(255, 255, 255, 0.7)'
	           })
	})
//左边栏点击足球美女的效果
	$('.lefthide .fgirl').on('tap',function(){
             $('.leftmask').css('display','none')
             $('.lefthide').css('display','none')
             $('.box1').css("left",-12.8 + 'rem')
			index = 2;
             $('.gx_friend').css('display','none')
             $('.gx_container1Nav').css('display','block')
             $('.index_box').css('margin-top','1.58rem')
			 $('.container3').hide(); 
             $('.index_box').show();
             $('.mine').hide();
              $('.topMiddle1').hide();
             $('.topMiddle').show();
             $('.footer .left .font1 span').css('color',"#35AE51");
             $('.footer .left .font1 i').css('color',"#35AE51");
             $('.footer .left .font2 span').css('color',"#CECECE");
             $('.footer .left .font2 i').css('color',"#CECECE");
             $('.footer .right span').css('color',"#CECECE");
             $('.footer .right  i').css('color',"#CECECE");
             $('.footballGirl').css('border-bottom','5px solid #0ec044')
			$('.footballLife').css('border-bottom','0')
			$('.footballLive').css('border-bottom','0')
			$('.publicTop #news').css('background','rgba(255,255,255,0.5)')
			           $('.publicTop #focus').css({
			           	background:'rgba(255,255,255,0.3)',
			                      color: 'rgba(255, 255, 255, 0.7)'
			           })
	})
//头像点击效果变换
$('.container8 .grjs').on('tap',function(){
    	$('.container8').css('display','none')
    	$('.gx_photoCut').css('display','block')
    	
    	var $a = $('.gx_photoTop').height() - $('.gx_photoWord').height();
//      console.log($('#canvas'));
        if($('#canvas').length ==0){
         $('<canvas id="canvas" width="'+$('.gx_photoTop').width()+'" height="'+$a+'"></canvas>').prependTo($('.gx_photoTop'));
        $('<canvas id="canvas2" width="'+$('.gx_photoTop').width()/2+'" height="'+$a/2+'"></canvas>').prependTo($('.gx_photoTop'));
      }   
    
	    var img = new Image();
	    img.src = 'img/cj.jpg';
	    var scalex = img.width/$('#canvas').width();
	    var scaley = img.height/$('#canvas').height();
	    
	    var con = $('#canvas').get(0).getContext('2d');
	    var con2 = $('#canvas2').get(0).getContext('2d');
	    img.onload = function(){
			  con.drawImage(img,0,0,$('.gx_photoTop').width(),$a);
	         con2.drawImage(img,0,0); 
	         con2.drawImage(img,scalex*$('#canvas2').offsetLeft,scaley*$('#canvas2').offsetTop,scalex*$('.gx_photoTop').width()/2,scaley*$a/2,0,0,$('#canvas2').width(),$('#canvas2').height());

			}

    })

$(function(){
	$('.mask1').on('touchstart',function(){
           var e = event || window.event;
           var x = e.changedTouches[0].clientX ;
           var y = e.changedTouches[0].clientY;
    var $a = $('.gx_photoTop').height() - $('.gx_photoWord').height();
    var img = new Image();
    img.src = 'img/cj.jpg';
    var scalex = img.width/$('#canvas').width();
        var scaley = img.height/$('#canvas').height();
//           console.log(1);
           $('.mask1').on('touchmove',function(){
//         	console.log(1);
               var e = event || window.event;
               var x1 = e.changedTouches[0].clientX;
               var y1 = e.changedTouches[0].clientY ;
               //(img,gao,left,beilv*huabukuan,beilvhuabugao,0,0,huabuw,huabuga)
//               console.log(x1,y1)
//               console.log(canvas.offsetLeft)
//             console.log($('#canvas').width() - $('#canvas2').width())
               if(x1>=($('#canvas').width()-$('#canvas2').width()/2)){
            	   x1 = $('#canvas').width()-$('#canvas2').width()/2;
//          	   console.log(1);
               }
               if(x1<=$('#canvas2').width()/2){
            	   x1 = $('#canvas2').width()/2;
               }
               if(y1>=($('#canvas').height()-$('#canvas2').height()/2)){
            	   y1 = $('#canvas').height()-$('#canvas2').height()/2;
               }
               if(y1<=$('#canvas2').height()/2){
            	   y1 = $('#canvas2').height()/2;
               }
               document.getElementById('canvas2').style.left =
                   x1 - $('#canvas2').width()/2 + 'px';
               document.getElementById('canvas2').style.top =  y1 - $('#canvas2').height()/2 + 'px';
             //  console.log(scaley,scaley*$('#canvas2').offset().top);
               $('#canvas2').get(0).getContext('2d').drawImage(img,scalex*$('#canvas2').get(0).offsetLeft,scaley*$('#canvas2').get(0).offsetTop,scalex*$('#canvas2').width(),scaley*$('#canvas2').height(),0,0,$('#canvas2').width(),$('#canvas2').height());
           });
           $('.mask1').on('touchend',function(){
               $('.mask1').on('touchmove',function(){});
               $('.mask1').on('touchend',function(){});
           }) ;
       }); 
    });


$(function(){
	$('.buttonFirst').on('tap',function(){
	    $('#gy').get(0).src = $('#canvas2').get(0).toDataURL();
	    
	})
	
	$('.giveUp').on('tap',function(){
	    $('#gy').get(0).src = '';
	    
	})
	
	$('.gx_photoSubmit').on('tap',function(){
		
//		$('#leftTou').get(0).src='';
        $('#leftTou').attr("src",$('#canvas2').get(0).toDataURL())
        console.log( $('#leftTou').attr("src"))
        console.log(1)
	})
	
})




//首页中的活动效果



